
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _constant = require('../utils/constant');

const _popup = require('../mixins/popup');

const _button = _interopRequireDefault(require('../button'));

const _createNamespace = (0, _utils.createNamespace)('dialog');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];
const t = _createNamespace[2];

const _default = createComponent({
  mixins: [(0, _popup.PopupMixin)()],
  props: {
    title: String,
    width: [Number, String],
    message: String,
    className: null,
    callback: Function,
    beforeClose: Function,
    messageAlign: String,
    cancelButtonText: String,
    cancelButtonColor: String,
    confirmButtonText: String,
    confirmButtonColor: String,
    showCancelButton: Boolean,
    transition: {
      type: String,
      default: 'van-dialog-bounce',
    },
    showConfirmButton: {
      type: Boolean,
      default: true,
    },
    overlay: {
      type: Boolean,
      default: true,
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: false,
    },
  },
  data: function data() {
    return {
      loading: {
        confirm: false,
        cancel: false,
      },
    };
  },
  methods: {
    onClickOverlay: function onClickOverlay() {
      this.handleAction('overlay');
    },
    handleAction: function handleAction(action) {
      const _this = this;

      this.$emit(action); // show not trigger close event when hidden

      if (!this.value) {
        return;
      }

      if (this.beforeClose) {
        this.loading[action] = true;
        this.beforeClose(action, (state) => {
          if (state !== false && _this.loading[action]) {
            _this.onClose(action);
          }

          _this.loading.confirm = false;
          _this.loading.cancel = false;
        });
      } else {
        this.onClose(action);
      }
    },
    onClose: function onClose(action) {
      this.close();

      if (this.callback) {
        this.callback(action);
      }
    },
    onOpened: function onOpened() {
      this.$emit('opened');
    },
    onClosed: function onClosed() {
      this.$emit('closed');
    },
    genButtons: function genButtons() {
      const _this2 = this;
      let _ref;

      const h = this.$createElement;
      const multiple = this.showCancelButton && this.showConfirmButton;
      return h('div', {
        class: [_constant.BORDER_TOP, bem('footer', {
          buttons: multiple,
        })],
      }, [this.showCancelButton && h(_button.default, {
        attrs: {
          size: 'large',
          loading: this.loading.cancel,
          text: this.cancelButtonText || t('cancel'),
        },
        class: bem('cancel'),
        style: {
          color: this.cancelButtonColor,
        },
        on: {
          click: function click() {
            _this2.handleAction('cancel');
          },
        },
      }), this.showConfirmButton && h(_button.default, {
        attrs: {
          size: 'large',
          loading: this.loading.confirm,
          text: this.confirmButtonText || t('confirm'),
        },
        class: [bem('confirm'), (_ref = {}, _ref[_constant.BORDER_LEFT] = multiple, _ref)],
        style: {
          color: this.confirmButtonColor,
        },
        on: {
          click: function click() {
            _this2.handleAction('confirm');
          },
        },
      })]);
    },
  },
  render: function render() {
    let _bem;

    const h = arguments[0];

    if (!this.shouldRender) {
      return;
    }

    const { message } = this;
    const { messageAlign } = this;
    const messageSlot = this.slots();
    const title = this.slots('title') || this.title;
    const Title = title && h('div', {
      class: bem('header', {
        isolated: !message && !messageSlot,
      }),
    }, [title]);
    const Content = (messageSlot || message) && h('div', {
      class: bem('content'),
    }, [messageSlot || h('div', {
      domProps: {
        innerHTML: message,
      },
      class: bem('message', (_bem = {
        'has-title': title,
      }, _bem[messageAlign] = messageAlign, _bem)),
    })]);
    return h('transition', {
      attrs: {
        name: this.transition,
      },
      on: {
        afterEnter: this.onOpened,
        afterLeave: this.onClosed,
      },
    }, [h('div', {
      directives: [{
        name: 'show',
        value: this.value,
      }],
      attrs: {
        role: 'dialog',
        'aria-labelledby': this.title || message,
      },
      class: [bem(), this.className],
      style: {
        width: (0, _utils.addUnit)(this.width),
      },
    }, [Title, Content, this.genButtons()])]);
  },
});

exports.default = _default;
